<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>问卷管理</el-breadcrumb-item>
      <el-breadcrumb-item>发布问卷</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="25">
        <el-col :span="10">
          <!-- 搜索区域 -->
          <el-input
            placeholder="请输入搜索内容"
            v-model="queryInfo.query"
            clearable
            @clear="getQuestionnaireList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getQuestionnaireListT"
            ></el-button>
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="addQuestionnaire()">
            创建问卷
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 卡片布局 -->
    <div v-if="dataShowType == 'gird'" class="project-grid-container">
      <div
        v-if="questionnaireList.length"
        v-loading="questionnaireListLoading"
        class="project-grid-view"
      >
        <div
          v-for="p in questionnaireList"
          :key="p.qid"
          class="project-grid-item-view pointer"
        >
          <el-row align="middle" justify="center" type="flex">
            <el-col :span="5">
              <span
                :style="getStatusColorStyle(p.status)"
                class="project-grid-view-status"
              />
            </el-col>
            <el-col :span="19">
              <el-tooltip :content="p.title" placement="top">
                <p class="project-title">
                  {{ p.title }}
                </p>
              </el-tooltip>
            </el-col>
          </el-row>

          <!-- 创建时间 -->
          <p class="project-grid-view-time" v-if="p.status == 0">暂未发布</p>
          <p class="project-grid-view-time" v-if="p.status == 1">
            发布时间:{{ p.releaseTime | FormatDate("yyyy-MM-dd") }}
          </p>
          <p class="project-grid-view-time" v-if="p.status == 2">已结束</p>

          <!-- 相关操作 -->
          <div class="gird-operating-btns">
            <el-button
              v-if="p.status == 0"
              type="text"
              @click="toQuestionnaireHandle(p.qid, 'editor')"
            >
              <i class="el-icon-edit" />
              编辑
            </el-button>
            <span>
              <el-button
                v-if="p.status != 0"
                type="text"
                @click="toQuestionnaireHandle(p.qid, 'statistics')"
              >
                <i class="el-icon-data-analysis" />
                统计
              </el-button>
            </span>
            <el-popconfirm
              v-if="p.status == 1"
              title="确定停止收集该问卷吗？"
              @confirm="stopQuestionnaire(p.qid)"
            >
              <el-button slot="reference" class="pink-text-btn" type="text">
                <i class="el-icon-video-pause" />
                停止
              </el-button>
            </el-popconfirm>

            <el-popconfirm
              v-if="p.status != 1"
              title="确定删除该问卷吗？"
              @confirm="deleteQuestionnaire(p.qid)"
            >
              <el-button slot="reference" class="pink-text-btn" type="text">
                <i class="el-icon-delete" />
                删除
              </el-button>
            </el-popconfirm>

            <el-popconfirm
              v-if="p.status == 2"
              title="确定重启该问卷吗？"
              @confirm="reopenQuestionnaire(p.qid)"
            >
              <el-button slot="reference" class="pink-text-btn" type="text">
                <i class="el-icon-refresh-left" />
                重启
              </el-button>
            </el-popconfirm>
          </div>
        </div>
      </div>

      <!-- 数据为空时显示的界面 -->
      <div v-if="!questionnaireListLoading && questionnaireList.length == 0">
        <!-- <data-empty /> -->
        <p>暂无问卷...</p>
      </div>
    </div>

    <!-- 分页组件 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[1, 4, 8, 16, 100]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getQuestionnaireList();
  },
  data() {
    return {
      queryInfo: {
        query: "", //查询信息
        pageNum: 1, //当前页
        pageSize: 4, //每一页最大数
      },
      questionnaireList: [], //用户列表
      total: 0, //总记录数

      dataShowType: "gird",
      questionnaireListLoading: false,
      addDialogVisible: false, //创建问卷的对话框状态
      questionnaireStatusList: [
        { code: 0, name: "未发布", color: "#006EFF" },
        { code: 1, name: "收集中", color: "#34C82A" },
        { code: 2, name: "已结束", color: "#955A45" },
      ],

      //添加表单信息
      addForm: {
        name: "",
        content: "",
      },
      //添加表单验证
      addFormRules: {
        username: [
          { required: true, message: "请输入问卷名称", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
    };
  },

  methods: {
    async getQuestionnaireList() {
      let name = window.sessionStorage.getItem("name");
      await this.$http({
        method: "post",
        url: "/allQuestionnairesY",
        data: {
          query: this.queryInfo.query,
          pageNum: this.queryInfo.pageNum,
          pageSize: this.queryInfo.pageSize,
          name: name,
        },
      }).then((response) => {
        this.questionnaireList = response.data.data.list;
        this.total = response.data.data.total;
      });
      console.log(this.questionnaireList);
    },

    async getQuestionnaireListT() {
      let name = window.sessionStorage.getItem("name");
      await this.$http({
        method: "post",
        url: "/queryQuestionnairesByTitleY",
        data: {
          query: this.queryInfo.query,
          pageNum: this.queryInfo.pageNum,
          pageSize: this.queryInfo.pageSize,
          name: name,
        },
      }).then((response) => {
        this.questionnaireList = response.data.data.list;
        this.total = response.data.data.total;
      });
    },

    //最大数
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getQuestionnaireList();
    },

    //pageNum触发的动作
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getQuestionnaireList();
    },

    //编辑问卷
    toQuestionnaireHandle(key, type) {
      if (type === "editor") {
        this.$router.push({
          path: "/createQuestionnaire",
          query: {
            id: key,
            name: "编辑问卷",
          },
        });
      } else if (type === "statistics") {
        this.$router.push({
          path:"/answeredManage",
          query:{
            id:key,
          },
        })
      } else {
        console.log("出现异常");
      }
    },

    //删除问卷,假的删除，放入回收站
    async deleteQuestionnaire(qId) {
      // console.log(qId);
      await this.$http({
        method: "post",
        url: "/putQuestionnaireToBin?qId=" + qId,
      }).then((response) => {
        if (response.data.code == "666") {
          // console.log(response);
          this.$message.success(response.data.message);
          this.getQuestionnaireList();
        } else {
          this.$message.error(response.data.message);
        }
      });
    },

    //停止问卷
    async stopQuestionnaire(qId) {
      await this.$http({
        method: "post",
        url: "/closeQuestionnaire?qId=" + qId,
      }).then((response) => {
        if (response.data.code == "666") {
          // console.log(response);
          this.$message.success(response.data.message);
          this.getQuestionnaireList();
        } else {
          this.$message.error(response.data.message);
        }
      });
    },

    //重启已经结束的问卷
    async reopenQuestionnaire(qId) {
      await this.$http({
        method: "post",
        url: "/issueQuestionnaire",
        data:{
          qId:qId,
        },
      }).then((response) => {
        if (response.data.code == "666") {
          // console.log(response);
          this.$message.success(response.data.message);
          this.getQuestionnaireList();
        } else {
          this.$message.error(response.data.message);
        }
      });
    },

    //监听添加用户
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    //创建问卷
    addQuestionnaire() {
      window.sessionStorage.setItem("activePath", "/CreateQuestionnaire"); //存放在session中
      this.$router.push({
        path: "/CreateQuestionnaire",
        query: {
          name: "新增问卷",
        },
      });
    },
  },

  computed: {
    getStatusColorStyle() {
      return function (code) {
        let color = this.questionnaireStatusList.find(
          (item) => item.code == code
        ).color;
        return {
          backgroundColor: color,
          borderColor: color,
        };
      };
    },
  },
};
</script>

<style lang="less" scoped>
/* 面包屑样式 */
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 17px;
}

.my-project-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.back-view {
  display: flex;
  width: 80%;
  align-content: flex-start;
  margin: 10px;
}

.filter-view {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
}

.show-view-type-icon {
  color: white;
  font-size: 18px;
  -webkit-text-stroke: 0.5px #a8a8a8;
  margin: 5px;
  cursor: pointer;
}

.show-view-type-icon-active {
  color: rgba(92, 155, 249, 100);
  -webkit-text-stroke: 0.5px rgba(92, 155, 249, 100);
}

.project-grid-container {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: center;
}

.project-grid-view {
  display: flex;
  width: 1045px;
  flex-direction: row;
  flex-wrap: wrap;
}

.project-table-view {
  margin-top: 20px;
  width: 80%;
}

.project-grid-item-view {
  width: 169px;
  height: 199px;
  line-height: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  margin: 20px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

  .project-title {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: left;
    line-height: 20px;
    max-height: 20px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-grid-view-status {
    display: inline-block;
    width: 7px;
    height: 7px;
    line-height: 20px;
    background-color: rgba(0, 110, 255, 100);
    text-align: center;
    border: 1px solid rgba(0, 110, 255, 100);
    border-radius: 20px;
  }
}

.gird-operating-btns {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  bottom: 0;
  display: none;
  border: none;
}

.project-grid-item-view:hover .gird-operating-btns {
  display: block;
}

.project-grid-view-preimg {
  width: 143px;
  height: 121px;
}

.project-grid-view-time {
  color: rgba(144, 147, 153, 100);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  margin: 0;
}

.project-page-view {
  margin-top: 30px;
}
</style>